<template>
	<div>
		<Button class="addbutton" icon="plus-round" type="dashed" @click="showPopup('isAddType')">新增服务类型</Button>
		<v-table ref="vTable" :tableColumns="tableColumns" :tableData="tableData1"></v-table>
		<!-- 新增服务类型 -->
	    <Modal 
	        v-model="isAddType"
	        :closable="false"
	        :mask-closable="false"
	        :width="358"
	        class-name="eidthform">
	        <p slot="header">新增服务类型</p>
	        <Form ref="addTypeForm" :model="addTypeData" :rules="addTypeRules" :label-width="80">
	            <FormItem label="服务类型:" prop="serviceCategoryName">
	                <Input type="text" v-model="addTypeData.serviceCategoryName" placeholder="请输入服务类型"></Input>
	            </FormItem>
	        </Form>
	        <div slot="footer" class="button-box">
	            <Button type="ghost" @click="cancel('addTypeForm', 'isAddType')">取消</Button>
	            <Button type="primary" :loading="isKeep"  @click="keepType('addTypeForm')">保存</Button>
	        </div>
	    </Modal> 
	</div>
</template>

<script>
	import vTable from "../../common/Table.vue"; 
	export default {
		components:{
			vTable
		},
		data(){
			return {
				isAddType: false,
				isKeep: false,
				tableData1: [],
				addTypeData: {
			        serviceCategoryName: ""
			    },
			    addTypeRules: {
			    	serviceCategoryName: [{ required: true, message: "请输入服务类型" }]
			    },
				tableColumns: [
					{ type: "index", align: "center", width: 60 },
					{ title: "服务类型", key: "name", align: "center" },
					{
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'error', size: 'small' },
                                    on: {
                                        click: () => {
                                        	this.$http.post('/remove_service_category',{serviceCategoryId:params.row.id})
                                        	.then((data)=>{
                                        		if(data.data.status === 0){
                                        			this.$Message.success("服务类型删除成功!");
                                        		} else {
                                        			this.$Message.error("服务类型删除失败!");
                                        		}
                                        		this.getListData()
                                        	})
                                        	.catch((err)=>{
                                        		console.log(err)
                                        	})
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
				]
			}
		},
		methods:{
			getListData(){
				this.$http.post('service_category_list')
				.then(({data})=>{
					this.tableData1 = data.serviceCategory
				})
			},
			// 获取服务类型
		    getServiceType() {
		      this.$http
		        .post("/service_category_list")
		        .then(res => {
		//             console.log(res);
		          this.serviceType = res.data.serviceCategory.map(function(e) {
		            e.id = e.id.toString();
		            return e;
		          });
		        })
		        .catch(err => {
		          console.log(err);
		          this.$Notice.error({ title: "服务类型列表获取失败！" });
		        });
		    },
			// 显示弹窗
		    showPopup(show) {
		      this[show] = true;
		    },
		    // 取消弹窗
		    cancel(refName, showName) {
		      this.$refs[refName].resetFields();
		      this[showName] = false;
		    },
		    // 添加服务类型
		    keepType(refName) {
		      this.$refs[refName].validate(valid => {
		        if (valid) {
		          this.isKeep = true;
		          this.$http
		            .post("/add_service_category", this.addTypeData)
		            .then(res => {
		              this.isKeep = false;
		              this.isAddType = false;
		              this.$refs[refName].resetFields();
		              this.getServiceType();
		              this.getListData()
		              this.$Message.success("服务类型添加成功!");
		            })
		            .catch(err => {
		              this.isKeep = false;
		              console.log(err);
		              this.$Notice.error({ title: "服务类型添加失败！" });
		            });
		        }
		      });
		    },
		},
		created(){
			this.getListData();
			this.getServiceType()
		}
	}
	
</script>

<style scoped>
	
</style>